import React, { useEffect, useState } from 'react'
import { NavBar, Button, Toast, Popup, Tag, Steps, Collapse, Input } from 'antd-mobile'
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import styles from './detail.module.css'
import dayjs from 'dayjs'
import instance from '../../api/instance'
import { CloseCircleOutline } from 'antd-mobile-icons'

const { Step } = Steps

function Index() {
    let navigate = useNavigate()
    const date = dayjs().format('YYYY-MM-DD')
    const { id } = useParams()
    const [visible1, setVisible1] = useState(false)
    const [value, setValue] = useState('')

    const [detailList, setDetailList] = useState({})
    const detailData = async () => {
        const res = await instance.get('/api/trip/train/detail', { params: { id } })
        console.log('res', res)
        const { code, data } = res.data
        if (code == 200) {
            setDetailList(data)
        }
    }
    useEffect(() => {
        detailData()
    }, [])


    const sitZ = ['一等座', '经济座', '商务座']

    //评论
    const [pllist,setPlList]=useState([])
    const hadnelPl=()=>{
        if(value==='')return
        setPlList([...pllist,value])
        setValue('')
    }

    //跳订单
    const handelOrder=()=>{
        navigate('/order',{state:detailList})
    }

    if (!detailList.id) {
        return <div>加载中...</div>
    }

    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>{date}</NavBar>
            <div className={styles.list}>
                <div className={styles.listItem} onClick={()=>handelOrder()}>
                    <span>{detailList.start}</span>
                    <span>====&gt;</span>
                    <span>{detailList.end}</span>
                    <span>{detailList.startTime}</span>
                    <span style={{ fontSize: '16px' }}>￥{detailList.tick.secondTick}起</span>
                </div>
                <div className={styles.listItem}>
                    <span>二等座：有票</span>
                    <span>一等座：有票</span>
                    <span>商务座：有票</span>
                </div>
                <p className={styles.listItem} onClick={() => setVisible1(true)}>时刻表</p>
            </div>
            <p>二等座已售空,为您找到以下有票方案</p>
            <Collapse accordion arrowIcon={() => <Tag color='warning'>订</Tag>}>
                {
                    sitZ.map((item, index) => {
                        return <Collapse.Panel key={index} title={`${item}`}>
                            <div className={styles.list}>
                                <div className={styles.listItem}>
                                    <span>{detailList.start}</span>
                                    <span>====&gt;</span>
                                    <span>{detailList.end}</span>
                                    <span>{detailList.startTime}</span>
                                    <span style={{ fontSize: '16px' }}>￥{detailList.tick.secondTick}起</span>
                                </div>
                                <div className={styles.listItem}>
                                    <span>二等座：有票</span>
                                    <span>一等座：有票</span>
                                    <span>商务座：有票</span>
                                </div>
                            </div>
                        </Collapse.Panel>
                    })
                }

            </Collapse>
            <div>
                <Input
                    placeholder='请输入内容'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                />
                <Button block color='success' size='large' shape='rounded' onClick={()=>hadnelPl()}>
                    提交
                </Button>
                {
                    pllist.map((item,index)=>{
                        return <p key={index}>{item}</p>
                    })
                }
            </div>
            {/* 时刻表弹出层 */}
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
            >
                <div className={styles.qx}>
                    <CloseCircleOutline onClick={() => setVisible1(false)} />
                </div>
                <Steps direction='vertical'>

                    <Step
                        title={<div className={styles.skb}>
                            <span>车站名称</span>
                            <span>到达</span>
                            <span>出发</span>
                            <span>停留</span>
                        </div>}
                        status='finish'
                    />
                    <Step
                        title={<div className={styles.skb}>
                            <span>北京南</span>
                            <span>--</span>
                            <span>06:10</span>
                            <span>--</span>
                        </div>}
                        status='finish'
                    />
                    <Step
                        title={<div className={styles.skb}>
                            <span>天津南</span>
                            <span>06:44</span>
                            <span>06:46</span>
                            <span>2分钟</span>
                        </div>}
                        status='finish'
                    />
                    <Step
                        title={<div className={styles.skb}>
                            <span>德州东</span>
                            <span>06:44</span>
                            <span>06:46</span>
                            <span>2分钟</span>
                        </div>}
                        status='finish'
                    />
                    <Step
                        title={<div className={styles.skb}>
                            <span>济南西</span>
                            <span>06:44</span>
                            <span>06:46</span>
                            <span>2分钟</span>
                        </div>}
                        status='finish'
                    />
                    <Step
                        title={<div className={styles.skb}>
                            <span>徐州东</span>
                            <span>07:56</span>
                            <span>07:58</span>
                            <span>2分钟</span>
                        </div>}
                        status='finish'
                    />
                </Steps>
            </Popup>
        </div>
    )
}

export default Index
